<template>
  <div>
  <iframe style="border:0;width:0;height:0;position:absolute;visibility:hidden;bottom:0;right:0;" name="mail_iframe"  src=""></iframe>
  <el-dropdown v-if="email.length>0" @command="emailTo" size="small">
    <span class="el-dropdown-link">
      <i :class="['iconfont', 'icon-youjian',  email.length===0 ? 'disable':'']"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item  :command="ema.email" v-for="ema in email">
      <a :href="'mailTo:' + ema.email" target="mail_iframe"><span>{{ema.email}}</span><span v-if="ema.memo">({{ema.memo}})</span></a>
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  <span v-else class="el-dropdown-link">
    <i :class="['iconfont', 'icon-youjian',  email.length===0 ? 'disable':'']"></i>
  </span>
</div>
</template>
<script>
  export default {
    name: 'Email',
    data () {
      return {
      }
    },
    props: {
      email: Array
    },
    methods: {
      emailTo (command) {
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
.el-dropdown, .el-dropdown-link
  display block
  width 100%
  height 100%
  line-height 36px
  text-align center
  color $c-main
  .iconfont
    font-size 18px
  .disable
    color #d3d3d3
    cursor no-drop
</style>
